<template>
  <div class="detail">
    <van-nav-bar
      title="商品详情页"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
      class="top"
    ></van-nav-bar>
    <div class="content">
      <h3>{{ product.name }}</h3>
      <div v-html="product.content"></div>
    </div>

    <van-goods-action class="bottom">
      <van-goods-action-icon icon="chat-o" text="客服" dot @click="kefu" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="loadCarsCount ? loadCarsCount : ''"
        @click="toCart"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" :badge="num" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Notify } from "vant";
// 获取商品详情api
import { loadProductDetailAPI } from "../services/product";
// 加入购物车api
import { addcarAPI } from "../services/carts";
import { getToken } from "@/utils/auth";
// import { mapActions, mapState } from "vuex";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      product: {},
      num: Math.floor(Math.random() * 20),
    };
  },
  created() {
     this.loadData();
  },
  computed: {
    //  ...mapState("cartsCount", ["cartInfo"]),
    ...mapGetters("cartsCount", ["loadCarsCount"]),
  },

  methods: {
    async loadData() {
      const resProduct = await loadProductDetailAPI(this.$route.params.id);
      this.product = resProduct.data;
      console.log(JSON.stringify(this.product));
      // this.getcars();
    },
    // ...mapActions("cartsCount", {getcars:"getcars"}),
    onClickIcon() {
      alert("买了");
    },
    onClickButton() {
      alert("立即购买");
    },
    kefu() {
      Toast.success("暂未开通，敬请期待");
    },
    toCart() {
      this.$router.push({
        name: "Cart",
      });
    },
    addCart() {
      if (getToken()) {
        addcarAPI({
          product: this.$route.params.id,
          amount: 1,
        }).then((res) => {
          if (res.code == 1) {
            // this.getcars();
            this.$store.dispatch("cartsCount/getcars");
            Notify({
              message: res.msg,
              type: "success",
            });
          } else {
            Notify({
              message: "未知错误",
              type: "warning",
            });
          }
        });
      } else {
          Notify({
              message: "请先登录",
              type: "warning",
            });
      }
    },
    toHome() {
      this.$router.push({
        name: "Home",
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  // 当使用了keep-alive的时候，建议使用这个生命周期钩子函数解决获取数据的问题
  // async activated() {
  //   // console.log(this.$route.params);
  //   const resProduct = await loadProductDetailAPI(this.$route.params.id);
  //   this.product = resProduct.data;
  // },
  watch: {
    // 可以监听路由地址的变化，获取当前的参数
    // $route(v) {
    //   console.log(v);
    // },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.detail {
  position: relative;
  top: 60px;
  display: flex;
  flex-direction: column;
}

.bottom,
.top {
  height: 10vh;
  width: 100vw;
}
.content {
  width: 100vw;
  flex: 1;
}
.content img {
  width: 100vw;
}
</style>
